<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id="inputEle" readonly value="admin">

    <select id="selectEle" disabled>
        <option value="sc">四川</option>
        <option value="yn">云南</option>
        <option value="gz">贵州</option>
    </select>

    <input type="radio" name="gender" value="男"><label>男</label>
    <input type="radio" name="gender" value="女"><label>女</label>

    <button disabled id="buttonEle">注册</button>

    <script>

        inputEle.readOnly = false;

        inputEle.onchange = function (e) {
            console.log(inputEle.value);
            console.log(e.target.value);
        }

        selectEle.value = "yn";

        selectEle.onchange = function () {
            console.log(selectEle.value);
        }


        const radiosEle = document.querySelectorAll("[name=gender]");
        const manRadio = document.querySelector("[value=男]");
        manRadio.checked = true;

        buttonEle.disabled = false;
        console.log(buttonEle.disabled);

        buttonEle.onclick = function () {
            // for (let item of radiosEle) {
            //     if (item.checked) {
            //         console.log(item.value);
            //     }
            // }
            // console.log(radiosEle);

            const checkedRadio = [...radiosEle].find(item => item.checked);
            // if (checkedRadio) {
            //     console.log(checkedRadio.value);
            // }
            console.log(checkedRadio?.value);


        }
    </script>
</body>

</html>